<template> 
  <view class="account-page">
    <Navbar title="账号管理" />
    
    <!-- 表格头部 -->
    <view class="table-header">
      <view class="header-cell">
        <text class="header-text">身份</text>
      </view>
      <view class="header-cell">
        <text class="header-text">姓名</text>
      </view>
      <view class="header-cell">
        <text class="header-text">手机号</text>
      </view>
      <view class="header-cell">
        <text class="header-text">管理</text>
      </view>
    </view>
    
    <!-- 账号列表 -->
    <view class="account-list">
      <view v-if="loading" class="loading-container">
        <text class="loading-text">加载中...</text>
      </view>
      <view v-else-if="accountList.length === 0" class="empty-container">
        <text class="empty-text">暂无用户数据</text>
      </view>
      <view v-else class="account-item" v-for="(account, index) in accountList" :key="index">
        <view class="item-cell">
          <text class="item-text">{{ account.role }}</text>
        </view>
        <view class="item-cell">
          <text class="item-text text-ellipsis">{{ account.name }}</text>
        </view>
        <view class="item-cell">
          <text class="item-text">{{ account.phone }}</text>
        </view>
        <view class="item-cell">
          <view class="manage-icon" @click="goToAccountDetail(account.id)">
            <image 
              class="manage-img" 
              src="/static/img/minePages/manage-icon.png" 
              mode="widthFix"
            />
          </view>
        </view>
      </view>
    </view>
    
    <!-- 底部添加按钮 -->
    <view class="bottom-actions">
      <view class="add-btn" @click="addAccount">
        添加账号
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import Navbar from '@/components/Navbar.vue';
import { mygo } from '@/utils/useNavigator';
import { createRequest } from '@/utils/request';

// 账号列表数据
const accountList = ref([]);
const loading = ref(false);

// 获取用户列表
const fetchUserList = async () => {
  loading.value = true;
  try {
    const response = await createRequest('/user/getUserList');
    
    if (response && response.data) {
      // 将后端数据映射为前端需要的格式
      accountList.value = response.data.map(user => ({
        id: user.userId,
        role: user.userType === 1 ? '管理人员' : '现场人员',
        name: user.realName, 
        phone: user.mobile
      }));
    }
  } catch (error) {
    console.error('获取用户列表失败:', error);
    uni.showToast({
      title: '获取用户列表失败',
      icon: 'none'
    });
  } finally {
    loading.value = false;
  }
};

// 页面加载时获取用户列表
onMounted(() => {
  fetchUserList();
});

// 跳转到账号详情页面
const goToAccountDetail = (userId) => {
  mygo(`/pages/minePages/accountDetail?userId=${userId}`);
};

// 添加账号
const addAccount = async () => {
  try {
    //向后端发送请求添加空人员
    const response = await createRequest('/user/add');
    // 请求成功后，在前端数据中添加新人员
    if (response && response.data) {
      uni.showToast({
        title: '添加成功',
        icon: 'success'
      });
      
      // 添加成功后刷新用户列表
      await fetchUserList();
      
      // 自动跳转到详情页面
      goToAccountDetail(response.data);
    }
  } catch (error) {
    console.error('添加账号失败:', error);
    uni.showToast({
      title: '添加失败，请重试',
      icon: 'none'
    });
  }
};
</script>

<style scoped lang="scss">
.account-page {
  @include page-with-header;
  background: #172869;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.table-header {
  display: flex;
  justify-content: space-around;
  margin: 40rpx 32rpx 20rpx;
  padding: 20rpx 0;
  box-sizing: border-box;
  background-color: rgba(255, 255, 255, 0.1);
  border-radius: 10rpx;
}

.header-cell {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 28rpx;
  font-weight: 500;
}

.account-list {
  flex: 1;
  padding: 0 40rpx;
}

.account-item {
  display: flex;
  padding: 30rpx 0;
  border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);
}

.account-item:last-child {
  border-bottom: none;
}

.item-cell {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.item-text {
  color: #fff;
  font-size: 30rpx;
}

.manage-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.manage-img {
  width: 36rpx;
  height: 36rpx;
}

.bottom-actions {
  width: 100%;
  height: 168rpx;
  background: #071E51;
  display: flex;
  align-items: center;
  justify-content: center;
}

.loading-container,
.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
}

.loading-text,
.empty-text {
  color: rgba(255, 255, 255, 0.6);
  font-size: 28rpx;
}

.add-btn {
  width: 686rpx;
  height: 80rpx;
  background: linear-gradient(90deg, #3a8dde 0%, #256bda 100%);
  color: #fff;
  font-size: 32rpx;
  border: none;
  border-radius: 40rpx;
  box-shadow: 0 4rpx 16rpx rgba(58, 108, 255, 0.12);
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  
  &:active {
    transform: scale(0.98);
  }
}

.text-ellipsis {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 160rpx;
}

</style>